<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName" class="bill_type">
        <el-tab-pane label="周账单" name="1"></el-tab-pane>
        <el-tab-pane label="月账单" name="2"></el-tab-pane>
        <el-tab-pane label="账单差异" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == '1'">
      <initialBillsType :type="activeName" />
    </template>
    <template v-else-if="activeName == '2'">
      <initialBillsType :type="activeName" />
    </template>
    <template v-else>
      <diffInitialBillsType />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import initialBillsType from "./components/initialBillsType/index";
import diffInitialBillsType from "./components/diffInitialBillsType/index";
const activeName = ref("1");
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
:deep(.bill_type) {
  .is-active {
    background: var(--el-color-primary);
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .el-tabs__item.is-top {
    &:last-child {
      padding-right: 20px;
      border-right-width: 1px;
    }
    &:nth-child(2) {
      padding-left: 20px;
      border-left-width: 1px;
    }
    &:nth-child(3){
      border-left-width: 1px;
      border-right-width: 1px;
    }
  }
}
</style>
